<template>
    <div class="wrapper">
        <div class="imgList">
            <img v-lazy="imgs" alt="">
        </div>
        <div class="info">
            <div class="name">
                <input type="text" placeholder="姓名" @blur="blurInput" @focus="focusClick" v-model="name">
            </div>
            <div class="mobile">
                <input type="text" placeholder="电话" v-model="mobile" @blur="blurInput" @focus="focusClick">
            </div>
            <div class="select-plate" v-if="code!='prize_2'">
                <div class="text">{{selectText}}</div>
                <span><img src="http://rs.static.quanc.com.cn/jbweb/lt/f-selectdown.png" alt=""></span>
                <select name="" id="" v-model="selectPlate" @change="selected">
                    <option :value="item.adress" v-for="(item, index) in selectList"  :key="index">
                        {{item.adress}}
                    </option>
                </select>
            </div>

            <div class="submit" @click="submit">提 交</div>
            <p v-if="code==='prize_4'">
                凭优惠券兑换码和提交截图，至领取的项目售楼处，可享受单套房源总价减3000元的额外优惠。每套房源限使用一张优惠券，每张优惠券对应一个客户姓名，不可转让，不可兑现。优惠券使用期限至2019年2月28日。</p>
            <p v-if="code==='prize_3'">
                请您于2019年2月28日前，至勾选的项目售楼处领取百草味年货大礼包。每个礼品兑换码只可领取一份礼品。礼品数量有限，领完即止，本次活动最终解释权归开发商所有。
            </p>
        </div>
        <div class="return" @click="ret">
            <img src="http://rs.static.quanc.com.cn/activies/mfAct/left.png" alt="">
        </div>
    </div>
</template>
<script>
    import {MessageBox} from "mint-ui";
    import request from "@/utils/request";
    import * as config from "./config";
    //    import wx from "weixin-js-sdk";
    import wxsdk from "@/utils/wxsdk";
    import {mapState, mapMutations} from "vuex";
    import utils from "@/utils/utils";
    import Cookies from "js-cookie";

    export default {
        data() {
            return {
                loading: false,
                isFocus: false,
                imgs: 'http://rs.static.quanc.com.cn/activies/mfAct/package.png',
                imgList: [
                    "http://rs.static.quanc.com.cn/activies/mfAct/package.png",
                    "http://rs.static.quanc.com.cn/activies/mfAct/fare.png",
                    "http://rs.static.quanc.com.cn/activies/mfAct/house.png",
                ],
                name: this.$route.query.name ? this.$route.query.name : '',
                mobile: this.$route.query.mobile ? this.$route.query.mobile : '',
                openid: Cookies.get("openid"),
                selectList: [
                    {
                        id: 0,
                        adress: "荟聚中心"
                    },
                    {
                        id: 1,
                        adress: "长江北路欧尚"
                    },
                    {
                        id: 2,
                        adress: "宝龙家乐福"
                    }, {
                        id: 3,
                        adress: "宝龙百货中庭"
                    }
                ],
                selectPlate: "",
                selectText: "请选择领取地址",
                reOpenid: this.$route.query.reOpenid ? this.$route.query.reOpenid : '',
                code: this.$route.query.code
            };
        },
        computed: {
            ...mapState(["info", "channel"])
        },
        methods: {
            ret(){
                this.$router.push({path: '/index', query:{channel:this.channel,reOpenid:this.reOpenid}});
            },
            focusClick(e) {
                this.isFocus = true;
                if (utils.browser.versions.ios) {
                    setTimeout(function () {
                        e.target.scrollIntoView(true);
                    }, 100);
                }
            },
            blurInput(e) {
                this.isFocus = false;
                this.$nextTick(() => {
                    if (utils.browser.versions.ios && !this.isFocus) {
                        setTimeout(function () {
                            e.target.scrollIntoView(false);
                        }, 300);
                    }
                });
            },
            codes(prCode) {
                let _self =this;
                request
                    .get(_self.global.API_URL, {
                        action: "/activity/relay/RelayAction/getPrizeInfo",
                        requestParam: {
                            actcode: config.ACT_CODE,
                            prizecode: prCode,
                        }
                    })
                    .then(response => {
                        if (response.obj && response.obj.id) {
                            let msg = prCode === 'prize_3' ? ("恭喜你，获得礼品兑换码【" + response.obj.id + "】。凭此页截图可至你选择的项目领取百草味年货大礼包。可至首页“我的年礼”，查看此码。") : ("恭喜你，获得优惠兑换码【" + response.obj.id + "】。凭此页截图可至你选择的项目购房使用优惠。可至首页“我的年礼”，查看此码。")

                            MessageBox.alert(msg, "提示").then(
                                () => {
                                    window.location.href = location.protocol + '//' + location.host + '/act/ztact/index?channel=' + this.channel + '&reOpenid=' + this.reOpenid+"&isShare="+true;
//                                    _self.$router.push({
//                                        path: "/index",
//                                        query: {isShare: true, channel: _self.channel}
//                                    });
                                }
                            );
                        }

                    });
            },
            selected($e) {
                this.selectText = this.selectPlate;
                if (utils.browser.versions.ios) {
                    setTimeout(function () {
                        $e.target.scrollIntoView(false);
                    }, 300);
                }

            },
            submit() {
                let _self = this;
                _self.loading = true;
                if (!_self.name) {
                    return MessageBox.alert("请输入姓名", "提示");
                }
                if (!_self.mobile) {
                    return MessageBox.alert("请输入手机号", "提示");
                } else {
                    if (!utils.isMobile(_self.mobile)) {
                        return MessageBox.alert("请填写正确的手机号", "提示");
                    }
                }

                if (_self.code != 'prize_2' && ! _self.selectPlate) {
                    return MessageBox.alert("请选择您领奖的地址", "提示");
                }
                if(_self.loading){
                    let obj={
                        mobile: _self.mobile,
                        name: _self.name,
                        actcode: config.ACT_CODE,
                        groupcode: config.ACT_CODE,
                        channel: _self.channel,
                        referenceopenid: _self.reOpenid,

                    };
                    if(_self.code != 'prize_2'){
                        obj.address = _self.selectPlate;
                    }
                    request
                        .get(_self.global.API_URL, {
                            action: "/activity/relay/RelayAction/joinAct",
                            requestParam: {
                                obj: obj
                            }
                        })
                        .then(response => {
                            MessageBox.alert("提交信息成功", "提示").then(() => {
                                if (_self.code) {
                                    request
                                        .get(_self.global.API_URL, {
                                            action: "/activity/relay/RelayAction/getZHPrize",
                                            requestParam: {
                                                actcode: config.ACT_CODE,
                                                prizecode: _self.code,
                                                channel: _self.channel
                                            }
                                        })
                                        .then(response => {
                                            if (response.code == 0) {
                                                if (_self.code == 'prize_4' || _self.code == 'prize_3') {
                                                    _self.codes(_self.code)
//                          MessageBox.alert("恭喜你，获得优惠兑换码【"+codes(_self.code)+"】。凭此码可至你选择的项目购房使用优惠。可至首页“我的年礼”，查看此码。", "提示").then(
//                              () => {
//                                  _self.$router.push({path:"/house",query:{isShare:true,channel:_self.channel}});
//                              }
//                          );
//                      }else if(_self.code == 'prize_3'){
//                          MessageBox.alert("恭喜你，获得礼品兑换码【XXXXX】。凭此码可至你选择的项目领取年礼。可至首页“我的年礼”，查看此码。", "提示").then(
//                              () => {
//                                  _self.$router.push({path:"/shack",query:{isShare:true,channel:_self.channel}});
//                              }
//                          );
                                                } else {
                                                    MessageBox.alert("恭喜你，获得2元话费，将直接充入你的手机号", "提示").then(
                                                        () => {
                                                            window.location.href = location.protocol + '//' + location.host + '/act/ztact/index?channel=' + this.channel + '&reOpenid=' + this.reOpenid+"&isShare="+true;
//                                                            _self.$router.push({
//                                                                path: "/index",
//                                                                query: {isShare: true, channel: _self.channel}
//                                                            });
                                                        }
                                                    );
                                                }
                                            }
                                        });
                                }
                            });
                        });
                }

            },
            ...mapMutations({
                setInfo: "SET_INFO",
                setChannel: "SET_CHANNEL"
            })
        },
        created() {
            if (this.code == 'prize_2') {
                this.imgs = this.imgList[1]
            } else if (this.code == 'prize_3') {
                this.imgs = this.imgList[0]
            } else if (this.code == 'prize_4') {
                this.imgs = this.imgList[2]
            }
            this.setChannel(this.$route.query.channel ? this.$route.query.channel : 0);
            if (!this.info.mobile) {
                request
                    .get(this.global.API_URL, {
                        action: "/activity/relay/RelayAction/getActUserInfo",
                        requestParam: {
                            actcode: config.ACT_CODE,
                            referenceopenid: ""
                        }
                    })
                    .then(response => {
                        this.setInfo(response.obj);
                        if (this.info && this.info.nickname && this.info.nickname != '') {
                            this.global.SHARE_TITLE = "大力士【" + this.info.nickname + "】摇中大礼，测测你的臂力";
                        }
                        this.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/ztact/index?channel=' + this.channel + '&reOpenid=' + this.openid;
                    });
            }

        },
        mounted() {
            let _self = this;
            request
                .get(_self.global.API_URL, {
                    action: "/activity/relay/RelayAction/getUserPrize",
                    requestParam: {
                        actcode: config.ACT_CODE
                    }
                })
                .then(response => {
//        console.log(JSON.stringify(response.obj));
                });

            this.global.SHARE_CALLBACK_OK = function (type) {
                request
                    .get(_self.global.API_URL, {
                        action: "/activity/relay/RelayAction/share",
                        requestParam: {
                            actcode: config.ACT_CODE,
                            groupcode: config.ACT_CODE,
                            prizecode: 'prize_1',
                            channel: _self.channel,
                            referenceopenid: _self.reOpenid
                        }
                    })
                    .then(response => {

                    });
            };
//            _self.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/mfact/index?channel=' + _self.channel + '&reOpenid=' + _self.openid;
            config.initShare();

        }
    };
</script>
<style lang="stylus" scoped>
    @import '~@/assets/styles/mixins.styl';
    img {
        pointer-events: none;
    }

    .wrapper {
        position absolute
        top: 0
        left: 0
        bottom: 0
        right: 0
        background: url('http://rs.static.quanc.com.cn/activies/mfAct/infoBg.jpg') repeat center center;
        background-size: 100% 100%;
    }

    .imgList {
        width: 45%;
        margin: 0 auto;
        padding-top: 1.5rem;
    }

    .imgList > img {
        width: 100%
        height: 100%
    }

    .info {
        width: 100%
        padding-top .5rem
    }

    .info .name {
        margin 0 auto
        height: 1rem
        width: 70%
        background: url('http://rs.static.quanc.com.cn/activies/mfAct/name.png') repeat center center;
        background-size: 100% 100%;
    }

    .info .mobile {
        margin 0 auto
        height: 1rem
        width: 70%
        background: url('http://rs.static.quanc.com.cn/activies/mfAct/mobile.png') repeat center center;
        background-size: 100% 100%;
    }

    input {
        color: #b1181e;
        width: 92%
        padding-left: 6%;
        height: 1rem;
        line-height: 1rem;
        background-color transparent
        border none
    }

    input::-webkit-input-placeholder {
        color: #b1181e;
        font-size: 14px;
    }

    .info .select-plate {
        width: 70%
        margin 0 auto
        background: url('http://rs.static.quanc.com.cn/activies/mfAct/mobile.png') repeat center center;
        background-size: 100% 100%;
        border-radius .3rem
        margin-bottom .2rem
        height 1rem
        position relative
    }

    .text {
        font-family: '\5B8B\4F53';
        color: #b1181e;
        width: 80%;
        margin-left: 3%;
        display: inline-block;
        font-size: 0.28rem;
        line-height: 1rem;
        height: .9rem;
        padding-left 4%
        overflow hidden
    }

    .select-plate > span {
        width: 7%
        line-height 1rem
        float right
        margin-right 5%
        display inline-block
    }

    span > img {
        width: 100%
    }

    .select-plate > select {
        color: transparent;
        position: absolute;
        top: 4px;
        left: 3%;
        width: 92%;
        margin: 0 auto;
        height: 0.9rem;
        padding: 0.1rem 0.2rem;
        line-height: 0.9rem;
        background-color: transparent;
    }

    .select-plate > select > option {
        color: #b1181e;
        font-size .24rem
    }

    .submit {
        width: 30%
        background-color #f7dc4d
        border-radius .3rem
        font-size .32rem
        height .8rem
        margin .2rem auto
        text-align center
        line-height .8rem
        color #d40a0d
        font-weight 600
    }

    p {
        width: 90%
        margin 0 auto
        color #fff
        font-size .24rem
        line-height .3rem
    }
    .return{
        position absolute
        top: 1rem
        left 0
        width: 2rem
    }
    .return>img{
        width: 100%
        height: 100%
    }
</style>
